﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui</title>
    <link href="../../../css/Hui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .current-index { font-size: 4.8rem; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -90px; background: rgba(0,0,0,0.5); font-family: Arial; display: none; text-align: center; line-height: 80px; }
    </style>
</head>
<body>
    <!--当前显示字母-->
    <div class="current-index H-position-fixed H-z-index-100000 H-border-radius-5 H-theme-font-color-white"></div>
    <!--字母索引-->
    <div class="contact-index H-flexbox-vertical H-position-fixed H-z-index-10000" style="width: 22px; right: 0; top: 0; bottom: 0; height: 100%; ">
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="top"><i class="H-iconfont H-icon-arrow-scrolltop H-font-size-14"></i></span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="star"><i class="H-iconfont H-icon-star H-font-size-13"></i></span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="A">A</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="B">B</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="C">C</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="D">D</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="E">E</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="F">F</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="G">G</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="H">H</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="I">I</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="J">J</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="K">K</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="L">L</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="M">M</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="N">N</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="O">O</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="P">P</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="Q">Q</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="R">R</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="S">S</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="T">T</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="U">U</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="V">V</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="W">W</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="X">X</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="Y">Y</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="Z">Z</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="HASH">#</span>
    </div>
    <!--联系人列表-->
    <div class="contact-list">
        <div class="group-name" data-group-name="top"></div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <span class="H-icon H-center-all H-display-block H-margin-horizontal-left-10 H-theme-font-color-white H-theme-background-color-52ace5" style="height: 30px; width: 30px;"><i class="H-iconfont H-icon-add-user H-font-size-18 H-vertical-middle"></i></span>
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">新朋友</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <span class="H-icon H-center-all H-display-block H-margin-horizontal-left-10 H-theme-background-color-ff7f8a" style="height: 30px; width: 30px;"><i class="H-iconfont H-icon-group-user H-font-size-18 H-vertical-middle H-theme-font-color-white"></i></span>
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">群聊</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <span class="H-icon H-center-all H-display-block H-margin-horizontal-left-10 H-theme-background-color-ffa977" style="height: 30px; width: 30px;"><i class="H-iconfont H-icon-tag H-font-size-18 H-vertical-middle H-theme-font-color-white"></i></span>
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">标签</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <span class="H-icon H-center-all H-display-block H-margin-horizontal-left-10 H-theme-background-color-4db7ad" style="height: 30px; width: 30px;"><i class="H-iconfont H-icon-vip H-font-size-18 H-vertical-middle H-theme-font-color-white"></i></span>
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">公众号</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="star">星标朋友</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">老爸</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">老妈</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">老姐</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">老弟</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="A">A</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">阿三</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">阿四</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">阿五</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="B">B</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">爸爸</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">八哥</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">波霸</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="C">C</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">唱歌</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">彻头彻尾</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">吃货</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="D">D</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">大哥</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">大姐</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">打的</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="E">E</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">二哥</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">额吉</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">儿子</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="F">F</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">房东</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">发哥</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">法海</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="J">J</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">佳佳</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">嘉美</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">姐姐</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="Q">Q</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">裘千仞</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">欠债的</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">齐天大圣</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="HASH">#</div>
        <div class="people-item">
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">520</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">*_*</div>
            </div>
            <div class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../../image/xsd.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">(*~.~*)</div>
            </div>
        </div>
    </div>
    <script src="../../../script/H.js" type="text/javascript"></script>
    <script type="text/javascript">
        var indexObj = H.D(".contact-index");
        var currentIndexObj = H.D(".current-index");
        var contactListObj = H.D(".contact-list");

        // 索引字母个数
        var indexSize = 29;
        // 索引列表高度
        var indexObj_height = indexObj.offsetHeight;

        // 滚动到指定字母位置
        function scrollToWord(word) {
            if (word) {
                var scrollObj = H.D(".group-name[data-group-name=" + word + "]");
                if (scrollObj) {
                    document.body.scrollTop = scrollObj.offsetTop + document.documentElement.scrollTop;
                }
            }
        }
        // 计算字母对应位置
        function calcWordToOffset(event) {
            var touch = event.targetTouches[0];
            var clientY = touch.clientY > 0 ? touch.clientY : 0;

            var _index = Math.floor(clientY / (indexObj_height / indexSize)) + 95;
            var word = "";
            // A-Z
            if (_index >= 97 && _index <= 122) {
                currentIndexObj.innerHTML = String.fromCharCode(_index).toUpperCase();
                word = String.fromCharCode(_index).toUpperCase();
            }
                // 向上箭头
            else if (_index == 95) {
                currentIndexObj.innerHTML = "<i class='H-iconfont H-icon-arrow-scrolltop' style='font-size:4.3rem;'></i>";
                word = "top";
            }
                // 星星
            else if (_index == 96) {
                currentIndexObj.innerHTML = "<i class='H-iconfont H-icon-star' style='font-size:4.3rem;'></i>";
                word = "star";
            }
                // #
            else if (_index == 123) {
                currentIndexObj.innerHTML = "#";
                word = "HASH";
            }
            else {
            }
            scrollToWord(word);
        }

        // 1.0 为字母索引绑定touch事件
        // 1.1 一触摸触发
        indexObj.addEventListener("touchstart", function (event) {
            if (event.targetTouches.length == 1) {
                // 显示当前字母
                H.cssText(currentIndexObj, "display:block;");
                // 高亮索引区域
                indexObj.classList.add("H-theme-background-color-eee");

                calcWordToOffset(event);
            }
        }, false);
        // 1.2 触摸过程
        indexObj.addEventListener("touchmove", function (event) {
            if (event.targetTouches.length == 1) {
                event.preventDefault();
                calcWordToOffset(event);
            }
        }, false);

        // 1.3 离开触摸
        indexObj.addEventListener("touchend", function (event) {
            // 显示当前字母
            H.cssText(currentIndexObj, "display:none;");
            // 高亮索引区域
            indexObj.classList.remove("H-theme-background-color-eee");
        }, false);
    </script>
</body>
</html>